<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/public/static/home/static/plug-in/swiper-4.3.3.min.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/home/static/css/base.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/home/static/font/font-awesome-4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/public/static/home/static/css/worklist.css" />
    <script src="/public/static/home/static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/static/home/static/plug-in/swiper-4.3.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <title>工单查询</title>
    <style>
        .time-axis{
            margin: 0;
            padding: 0;
            position: relative;
        }

        .time-axis:before{
            content: '';
            position: absolute;
            left: 179px;
            top: 15px;
            width: 1px;
            height: 100%;
            background-color: #E4E4E4;
        }
        .time-axis-item{
            list-style: none;
            padding-left: 210px;
            position: relative;
            line-height: 45px;
            font-size: 14px;
            color: #141414;
        }
        .time-axis-achievement{
            margin: 0;
        }
        .time-axis-date{
            position: absolute;
            left: 0;
            top: 0;
            color: #666;
        }

        .time-axis-date span{
            position: absolute;
            right: -49px;
            top: 35%;
            display: block;
            width: 13px;
            height: 13px;
            border: 1px solid #ccc;
            border-radius: 100%;
            background-color: #fff;
        }
        .time-axis-date span:after{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 7px;
            height: 7px;
            margin: auto;
            background-color: #ccc;
            border: 1px solid #ccc;
            border-radius: 100%;
        }

        .time-axis-item:first-child .time-axis-date span{
            border-color: #48BEB2;
        }

        .time-axis-item:first-child .time-axis-date span:after{
            background-color: #48BEB2;
            border-color: #48BEB2;
        }
    </style>
</head>
<body>
{include file="common/head"/}
<div class="top-img"></div>
<div class="path">
    <div class="container">
        <ol class="breadcrumb">
            <li>
                <a href="/">首页</a>
            </li>
            <li class="active">工单查询</li>
        </ol>
    </div>
</div>
<div class="worklist">
    <div class="container" id="photos">
        <div class="title">
            <img src=""/>
            <p>查询工单</p>
        </div>
        <textarea name="no" rows="4" cols="">{:input('no')}</textarea>
        <div class="btn">查询</div>
        <script>
            $('.btn').click(function () {
                var no = $('textarea[name=no]').val();
                if (no == ''){
                    alert('请输入要查询的单号！');
                    return false;
                }
                location.href = '/search_no?no='+no;
            });
        </script>
        <div class="list-title clearfix">
            <p>工单号：{:input('no')}</p>
            <i>{if condition="$list.data.0 eq null"}暂无数据{/if}</i>
        </div>

        {foreach name="$list.data" id="data"}
        <div class="list-state">
            <div class="state-title clearfix">
                <p class="date">{$data.update_time}</p>
                <p class="flag">{$data.title}【{$data.admin_name}】</p>
                <i class="fa fa-caret-up"></i>
            </div>
            <div class="main">
                <ul class="time-axis">
                    {foreach name="$data.list" id="vs"}
                    <li class="time-axis-item">
                        <div class="time-axis-date">
                            {$vs['c_time']}<span></span></div>
                        <div class="time-axis-title">
                            【{$vs.admin_name}】{$vs.content}
                            <br>
                            {foreach name="$vs.attach" id="va"}
                                <img src="{$va}" style="cursor: pointer;max-width: 100px;" layer-src="{$va}">
                            {/foreach}
                        </div>
                        <p class="time-axis-achievement"></p>
                    </li>
                    {/foreach}
                </ul>
            </div>
        </div>
        {/foreach}
    </div>
</div>
<!--底部-->
{include file="common/footer"/}

<script>
    layer.photos({
        photos: '#photos'
        ,closeBtn:1
        ,anim: 5
    });

</script>
</body>
</html>
